<!-- 委外订单列表弹框选择 -->
<script lang="ts">
import { queryOutsourceOrderPage } from "/@/api/quality/chooseOrder";
import { reactive, watch, nextTick } from "vue";
import { dateFormatYMD } from "/@/utils/date";
import { errorMessage } from "/@/utils/message";
export default {
  name: "outsourceOrder",
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, ctx) {
    // 选择订单弹窗绑定数据
    const chooseOrder = reactive({
      dialogShow: false, //操作显示隐藏
      loading: false,
      detailData: [] as any[],
      chooseData: [] as any[],
      totalCount: 0, //总数
      tableHeight: 0,
      formData: {
        bnoNo: "",
        taskNo: "",
        prodOrderNo: "",
        bomName: "",
        bomCode: "",
        date: "",
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      }
    });
    watch(props, n => {
      chooseOrder.dialogShow = n.dialogShow;
      if (chooseOrder.dialogShow) {
        queryOrderSelect();
        nextTick(() => {
          chooseOrder.tableHeight =
            document.getElementById("insertForm").clientHeight + 40;
        });
      }
    });

    const chooseOrderShow = () => {
      chooseOrder.detailData = [];
      chooseOrder.dialogShow = true;
      queryOrderSelect();
    };
    const queryOrderSelect = () => {
      chooseOrder.loading = true;
      const data: any = {};
      Object.assign(data, chooseOrder.formData);
      chooseOrder.loading = true;
      if (chooseOrder.formData.date) {
        data.startMakeDate =
          dateFormatYMD(chooseOrder.formData.date[0]) + " 00:00:00";
        data.endMakeDate =
          dateFormatYMD(chooseOrder.formData.date[1]) + " 23:59:59";
      } else {
        data.startMakeDate = "";
        data.endMakeDate = "";
      }
      delete data.date;
      queryOutsourceOrderPage(chooseOrder.formData)
        .then((res: any) => {
          if (res.code == 0) {
            chooseOrder.detailData = res.data && res.data.list;
            chooseOrder.totalCount = res.data && res.data.total;
          }
          chooseOrder.loading = false;
        })
        .catch(() => {
          chooseOrder.loading = false;
          errorMessage("查询失败");
        });
    };
    const handleSizeChange = val => {
      //改变每页数量
      chooseOrder.formData.pageRow = val;
      handleFilter(1);
    };
    const handleCurrentChange = val => {
      //改变页码
      handleFilter(val);
    };
    const handleFilter = val => {
      //查询事件
      chooseOrder.formData.pageNum = val;
      queryOrderSelect();
    };
    const handleSelectionChange = val => {
      chooseOrder.chooseData = [];
      for (var i in val) {
        chooseOrder.chooseData.push(val[i]);
      }
      console.log(val, chooseOrder.chooseData);
    };
    // 点击确定
    const chooseOrderSure = () => {
      ctx.emit("selectionChange", chooseOrder.chooseData);
      chooseOrderClose();
    };
    const chooseOrderClose = () => {
      chooseOrder.dialogShow = false;
      chooseOrder.detailData = [];
      chooseOrder.chooseData = [];
      chooseOrder.formData = {
        bnoNo: "",
        taskNo: "",
        prodOrderNo: "",
        bomName: "",
        bomCode: "",
        date: "",
        pageNum: 1, //页码
        pageRow: 15 //每页条数
      };
      chooseOrder.totalCount = 0; //总数
      ctx.emit("orderDialogClose");
    };

    return {
      chooseOrder,
      chooseOrderShow,
      queryOrderSelect,
      chooseOrderClose,
      handleSizeChange,
      handleCurrentChange,
      handleFilter,
      handleSelectionChange,
      chooseOrderSure
    };
  }
};
</script>
<template>
  <div>
    <!-- 弹框选择委外订单 -->
    <el-dialog
      v-model="chooseOrder.dialogShow"
      title="委外收货单"
      width="70%"
      top="9vh"
      :before-close="chooseOrderClose"
      :close-on-click-modal="false"
    >
      <el-form
        id="insertForm"
        ref="insertForm"
        :model="chooseOrder.formData"
        label-align="right"
        label-width="80px"
      >
        <el-row :gutter="10">
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="销售单号" prop="bnoNo">
              <el-input
                v-model="chooseOrder.formData.bnoNo"
                clearable
                @keyup.enter="queryOrderSelect"
                placeholder="请输入销售单号"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="任务编号" prop="taskNo">
              <el-input
                v-model="chooseOrder.formData.taskNo"
                clearable
                @keyup.enter="queryOrderSelect"
                placeholder="请输入任务编号"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item
              label="生产订单编号"
              prop="prodOrderNo"
              label-width="120px"
            >
              <el-input
                v-model="chooseOrder.formData.prodOrderNo"
                clearable
                @keyup.enter="queryOrderSelect"
                placeholder="请输入生产订单编号"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="品名" prop="bomName">
              <el-input
                v-model="chooseOrder.formData.bomName"
                clearable
                @keyup.enter="queryOrderSelect"
                placeholder="请输入品名"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="料号" prop="bomCode">
              <el-input
                v-model="chooseOrder.formData.bomCode"
                @keyup.enter="queryOrderSelect"
                clearable
                placeholder="请输入料号"
                size="small"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label-width="0px">
              <el-button type="primary" size="small" @click="queryOrderSelect"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        stripe
        v-loading="chooseOrder.loading"
        :data="chooseOrder.detailData"
        border
        fit
        :height="'calc(100% - ' + chooseOrder.tableHeight + 'px)'"
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          fixed="left"
          width="40"
        ></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          prop="bnoNo"
          label="销售单号"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="bnoName"
          label="单据类型"
          min-width="110"
        ></el-table-column>
        <el-table-column
          prop="supplierName"
          label="供应商名称"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="sourceDocuments"
          label="来源单据"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="sourceCategory"
          label="来源类别"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="orderDate"
          label="订单日期"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="制单人"
          min-width="80"
        ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="chooseOrder.formData.pageNum"
        :page-sizes="[10, 15, 20, 30, 40, 50]"
        :page-size="chooseOrder.formData.pageRow"
        layout="total, sizes, prev, pager, next, jumper"
        :total="chooseOrder.totalCount"
      ></el-pagination>
      <template #footer>
        <el-button @click="chooseOrderClose" size="small">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          v-if="chooseOrder.chooseData.length"
          @click="chooseOrderSure"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
